<template>
    <div class="location">
        <img src="@/assets/location.png" alt="" >
        <select 
        @change="Refresh" v-model="address" ref="select">
            <option 
            :value="item"
            v-for="(item,index) in addressList" :key="index">{{item}}
            </option>
        </select>
    </div>
</template>

<script>
    export default {
        name:"Location-Home",
        data(){
            return {
                addressList:[
                    '广东省广州市',
                    '广东省汕尾市',
                    '广东省佛山市',
                    '广东省深圳市',
                    '广东省珠海市'
                ],
                address:''
            }
        },
        methods: {
            // 位置改变刷新页面
            Refresh(){
                // 刷新前将用户选择的值放入本地存储
                localStorage.setItem('address',this.address)
                this.$router.go(0)
            }
        },  
        mounted() {
            // 挂载前获取用户存储的值，空则为广州市
            this.address = localStorage.getItem('address') || '广东省广州市'
        },
    }
</script>

<style scoped lang="less">
    .location{
        width: 95%;
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
        z-index:1000;
        top: 2.7vw;
        display: flex;
        align-items: center;
        height: 8vw;
       

        img{
            width: 4.8vw;
            height: 4.8vw;
        }

        select{
            border: none;
            color: #fff;
            background: #1272FE;
            margin-left: 1.3vw;
             outline: none;
        }
    }

</style>